<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OFFICE OS</title>
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.2.min.js" ></script>
<style>
body, html{
	height:100%;
	
	}
.L-box{
	width:250px;
	min-height:100%;
	
	position: fixed;	
	background:#37424e;
	float:left;
	}
.L-box h1, .L-box ul, .L-box li{
	margin:0px;
	padding:0px;
	cursor:pointer;
	
	}
.L-box h1{
	padding:25px 0 35px 54px;
	}
.L-box li{
	font-size:14px;
	display:block;
	color:#aec0d8;
	width:190px;
	height:100%;
	line-height:32px;
	padding-left:60px;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:10px;
	list-style-type:none;
	display:none;
    background:#2d363f;
	}	
.L-box li img{
	vertical-align:sub;
	margin-right:10px;
	}		
.L-box span{
	font-family:"微软雅黑";
	font-size:18px;
	font-weight:bold;
	color:#aec0d8;
	margin:0 0 10px 35px;
	display:block;
	
	}	
#open{
	display:block;
	
	}	
	
	
.R-box{
	width:70%;
	min-height:100%;
	margin-left:255px;
	float:left;
	overflow:inherit;
	display:block;
    padding-left:50px;
	}	
.R-box h1{
	
	width:100%;
	font-size:25px;
	line-height:3em;
	border-bottom:#D9D9D9 solid 1px;
	font-family:"微软雅黑";
	
	
	}
.R-box input{
	border:#D9D9D9 solid 1px;
	height:24px;
	
	}	
.R-box p{
	font-family:"微软雅黑";
	font-size:16px;
	
	}	
.R-box span{
	display:block;
	width:100px;
	float:left;
	}	
#submit{
	width:80px;
	height:40px;
	padding:8px;
	background:#005788;
	border:none;
	color:#FFFFFF;
	font-size:14px;
	
	
	}		
</style>

</head>

<body>
   <div class="L-box">
     <h1><img src="img/img03.png"/></h1>
        
        <ul>
          <span>基本设置</span>
            <li id="open"><img src="img/icon01.jpg" width="20" height="20" alt=""/>站点设置</li>
          <span>管理数据</span>
            <li>
              <img src="img/icon01.jpg" width="20" height="20" alt=""/>管理数据<br>
              <img src="img/icon01.jpg" width="20" height="20" alt=""/>增加数据
            </li>
        </ul>
</div>
   <div class="R-box">
        <h1>基本信息</h1>
        <p><span>网站名称：</span> <input type="text"></p>
        <p><span>关键词：</span> <input type="text"></p>
        <p><span>描述： </span><input type="text"></p>
        <p><span>站长邮箱： </span><input type="text"></p>
        <p><span>网站地址： </span><input type="text"></p>
        <p><span>ICP： </span><input type="text"></p>

        <input type="submit" value="更新" id="submit">
   </div>
   <script>
 $(".L-box span").click(
		function(){
			if($(this).next("li").is(":hidden")) 
				{	
					$(".L-box span li ").slideUp(300);
					$(this).next("li").slideDown(300);
				}
			else
				{
					$(this).next("li").slideUp(300);
				};
		 });
   </script>
</body>
</html>
